<template>
  <div class="fullScreen">
    <a-icon type="arrows-alt" class="fullScreenIcon" v-if="isFullScreen" @click="handleFullScreen" />
    <a-icon type="shrink" class="fullScreenIcon" v-else @click="exitFullScreen" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      isFullScreen: true, //控制全屏按钮
      element: document.getElementsByClassName('ant-layout-sider')
    }
  },
  methods: {
    // 全屏
    handleFullScreen() {
      // var element= document.getElementsByClassName('ant-layout-sider') //document.getElementById("content")
      this.element[0].style.display = 'none'
      this.isFullScreen = !this.isFullScreen
    },
    // 取消全屏
    exitFullScreen() {
      // var element= document.getElementsByClassName('ant-layout-sider') //document.getElementById("content")
      this.element[0].style.display = 'block'
      this.isFullScreen = !this.isFullScreen
    }
  },
  watch:{
    isFullScreen:{
      handler(newVal,oldVal){
        if(this.element[0]?.style?.display == 'none'){
          this.isFullScreen = false
        } else {
          this.isFullScreen = true
        }
      },
      deep:true,
      immediate:true
    }
    
  }
}
</script>

<style lang="less">
.fullScreen {
  position: absolute;
  top: 5px;
  right: 20px;
  // background: #2f87c8;
  z-index: 99999;
  width: 31px;
  height: 31px;
  text-align: center;
  .fullScreenIcon {
    font-size: 18px;
    color: #9f9696;
    line-height: 34px;
  }
}
</style>
